<template>
  <div>
    <t-popup
      style="width: 95%"
      v-model="showPopup"
      placement="center"
      :destroy-on-close="true"
      :round="true"
      @closed="closehide"
    >
      <div class="popup-content">
        <div class="proptitle">{{authority([4])?'在地': daiktx?'代课':'督课'}}信息填写</div>
        <div>
          <t-form
            :inline="inline"
            :data="formData"
            :rules="rules"
            ref="rulesForm"
            label-position="right"
          >
            <t-form-item
              label-width="170"
              prop="class_session_status"
              name="class_session_status"
              v-if="authority([5])"
            >
              <!--  <t-action-sheet v-model="visible" :items="baseData.items" @selected="handleSelected" @cancel="handleCancel" /> -->
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="课节状态："
                    :note="formData.class_session_status || '请选择课节状态'"
                    arrow
                    @click="popupShow('class_session_status')"
                  >
                    <template #note>
                      <span
                        :class="formData.class_session_status ? 't_cell' : ''"
                        >{{
                          showtitles(
                            class_session_status,
                            formData.class_session_status
                          ) || "请选择课节状态"
                        }}</span
                      >
                    </template>
                  </t-cell>
                </t-cell-group>
              </div>
              <t-action-sheet
                v-model="visible.class_session_status"
                :items="class_session_status"
                @cancel="visiblehide"
                :close-on-overlay-click="false"
                :show-overlay="false"
                readonly
                @selected="receptionData('class_session_status', $event)"
              />
            </t-form-item>
            <t-form-item
              label="异常原因："
              label-width="170"
              prop="abnormal_cause"
              name="abnormal_cause"
              v-if="authority([5]) && formData.class_session_status == 2"
            >
              <t-input
                v-model.trim="formData.abnormal_cause"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请输入异常原因"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label-width="170"
              prop="is_daike"
              name="is_daike"
              v-if="authority([5])"
            >
              <!--  <t-action-sheet v-model="visible" :items="baseData.items" @selected="handleSelected" @cancel="handleCancel" /> -->
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="是否代课："
                    :note="formData.is_daike || '请选择是否代课'"
                    arrow
                    @click="popupShow('is_daike')"
                  >
                    <template #note>
                      <span :class="formData.is_daike ? 't_cell' : ''">{{
                        showtitles(is_duser, formData.is_daike) ||
                        "请选择是否代课"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
              </div>
              <t-action-sheet
                v-model="visible.is_daike"
                :items="is_duser"
                @cancel="visiblehide"
                :close-on-overlay-click="false"
                :show-overlay="false"
                readonly
                @selected="receptionData('is_daike', $event)"
              />
            </t-form-item>
            <t-form-item
              label-width="170"
              prop="volunteer_stauts"
              name="volunteer_stauts"
              v-if="authority([5])"
            >
              <!--  <t-action-sheet v-model="visible" :items="baseData.items" @selected="handleSelected" @cancel="handleCancel" /> -->
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="志愿者考勤："
                    :note="formData.volunteer_stauts || '志愿者是否正常入会'"
                    arrow
                    @click="popupShow('volunteer_stauts')"
                  >
                    <template #note>
                      <span
                        :class="formData.volunteer_stauts ? 't_cell' : ''"
                        >{{
                          showtitles(
                            volunteer_stauts,
                            formData.volunteer_stauts
                          ) || "志愿者是否正常入会"
                        }}</span
                      >
                    </template>
                  </t-cell>
                </t-cell-group>
              </div>
              <t-action-sheet
                v-model="visible.volunteer_stauts"
                :items="volunteer_stauts"
                @cancel="visiblehide"
                :close-on-overlay-click="false"
                :show-overlay="false"
                readonly
                @selected="receptionData('volunteer_stauts', $event)"
              />
            </t-form-item>
            <t-form-item
              label-width="170"
              prop="local_teachers_status"
              name="local_teachers_status"
              v-if="authority([5])"
            >
              <!--  <t-action-sheet v-model="visible" :items="baseData.items" @selected="handleSelected" @cancel="handleCancel" /> -->
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="在地教师考勤："
                    :note="formData.local_teachers_status || '在地教师入会状态'"
                    arrow
                    @click="popupShow('local_teachers_status')"
                  >
                    <template #note>
                      <span
                        :class="formData.local_teachers_status ? 't_cell' : ''"
                        >{{
                          showtitles(
                            volunteer_stauts,
                            formData.local_teachers_status
                          ) || "在地教师入会状态"
                        }}</span
                      >
                    </template>
                  </t-cell>
                </t-cell-group>
              </div>
              <t-action-sheet
                v-model="visible.local_teachers_status"
                :items="volunteer_stauts"
                @cancel="visiblehide"
                :close-on-overlay-click="false"
                :show-overlay="false"
                readonly
                @selected="receptionData('local_teachers_status', $event)"
              />
            </t-form-item>
            <t-form-item label-width="170" prop="is_pause" name="is_pause">
              <!--  <t-action-sheet v-model="visible" :items="baseData.items" @selected="handleSelected" @cancel="handleCancel" /> -->
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="是否暂停："
                    :note="formData.is_pause || '是否暂停'"
                    arrow
                    @click="popupShow('is_pause')"
                  >
                    <template #note>
                      <span :class="formData.is_pause ? 't_cell' : ''">{{
                        showtitles(is_pauseList, formData.is_pause) ||
                        "是否暂停"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
              </div>
              <t-action-sheet
                v-model="visible.is_pause"
                :items="is_pauseList"
                @cancel="visiblehide"
                :close-on-overlay-click="false"
                :show-overlay="false"
                readonly
                @selected="receptionData('is_pause', $event)"
              />
            </t-form-item>
            <t-form-item
              label="暂停原因："
              label-width="170"
              prop="pause_remarks"
              name="pause_remarks"
              v-if="formData.is_pause == 2"
            >
              <t-input
                v-model.trim="formData.pause_remarks"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请输入暂停原因"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="备注："
              label-width="170"
              prop="remarks"
              name="remarks"
              v-if="authority([5])"
            >
              <t-input
                v-model.trim="formData.remarks"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请输入备注"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="备注："
              label-width="170"
              prop="zremarks"
              name="zremarks"
              v-if="authority([4])"
            >
              <t-input
                v-model.trim="formData.zremarks"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请输入备注"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <!-- 创造前 -->
          </t-form>
        </div>

        <div
          class="t-form__footer"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
          "
        >
          <t-button
            size="large"
            theme="primary"
            variant="text"
            @click="showPopup = false"
            >关闭</t-button
          >
          <!-- <el-button type="success" @click="showPopup = false" plain>关闭</el-button> -->
          <div style="display: flex">
            <t-button
              style="margin: 0 10px"
              theme="primary"
              :disabled="loading"
              @click="submitForm()"
            >
              {{ endtext || "新增" }}
            </t-button>
            <!-- <el-button type="success"  @click="submitForm()">{{ endtext || "新增" }}</el-button> -->
          </div>
        </div>
      </div>
    </t-popup>
  </div>
</template>
          
          <script>
import dayjs from "dayjs";
import { getStorage } from "@/utils/util";
import DataSelector from "@/components/h5com/dataSelector.vue";
import { Message } from "tdesign-mobile-vue";

export default {
  components: {
    DataSelector,
  },
  props: {
    status: {
      type: Boolean,
      default: false,
    },
    daiktx: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      endtext: "", //编辑状态
      userInfo: "", //权限数据
      showPopup: false,
      visible: {},

      formData: {},
      loading: false,
      couList: [],
      userIdList: [],
      weeklist: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      isStatusList: [
        { value: "1", label: "未排课" },
        { value: "2", label: "已排课" },
      ],
      verifyStatus: [
        { value: "1", label: "待核校" },
        { value: "2", label: "已核校" },
        { value: "3", label: "驳回" },
        { value: "4", label: "已通过" },
        { value: "5", label: "问题校" },
      ],
      class_session_status: [
        {
          value: "1",
          label: "正常",
        },
        {
          value: "2",
          label: "异常",
        },
      ],
      class_status: [
        {
          value: "1",
          label: "正常",
        },
        {
          value: "2",
          label: "异常",
        },
      ],
      volunteer_stauts: [
        {
          value: "1",
          label: "正常",
        },
        {
          value: "2",
          label: "异常",
        },
      ],
      is_pauseList: [
        {
          value: "1",
          label: "未暂停",
        },
        {
          value: "2",
          label: "暂停",
        },
      ],
      is_duser: [
        {
          value: "1",
          label: "未代课",
        },
        {
          value: "2",
          label: "代课",
        },
      ],
      rules: {
        local_teachers_status: [
          {
            required: true,
            message: "请选择在地老师是否正常入会",
            trigger: "change",
          },
        ],
        class_session_status: [
          { required: true, message: "请选择状态", trigger: "change" },
        ],
        class_status: [
          { required: true, message: "请选择是否正常上课", trigger: "change" },
        ],
        volunteer_stauts: [
          {
            required: true,
            message: "请选择志愿者是否正常入会",
            trigger: "change",
          },
        ],
        is_pause: [
          { required: true, message: "请选择是否暂停", trigger: "change" },
        ],
        is_daike: [
          { required: true, message: "请选择是否代课", trigger: "change" },
        ],
        pause_remarks: [
          { required: true, message: "请输入暂停原因", trigger: "blur" },
        ], 
        abnormal_cause: [
          { required: true, message: "请输入异常原因", trigger: "blur" },
        ],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
      },
    };
  },
  mounted() {
    this.userInfo = Number(JSON.parse(getStorage("groupId"))); //权限
  },
  methods: {
    authority(groupArr = [0]) {
      // 权限筛选
      let userInfo = this.userInfo;
      // 当前权限和传来的权限组进行对比
      if (groupArr.some((item) => Number(item) === userInfo)) return true;
      return false;
    },

    submitForm() {
      // console.log(this.$refs.rulesForm, "--------this.$refs.rulesForm");

      this.$refs["rulesForm"].validate().then((valid) => {
        if (valid === true) {
          let objs = { ...this.formData };
          if (objs.class_session_status == 1) delete objs.abnormal_cause;
          if (objs.is_pause == 1) delete objs.pause_remarks;

          this.$emit("endForm", objs);
        } else {
          Message.error("请输入必填项");
          console.log("表单验证失败");
        }
      });
      //  this.$refs.rulesForm.validate(); // 重置表单并清除验证状态
      // this.showPopup=false;
      // this.$emit('submitForm',this.formData)
    },
    changeSele(k, name, e, k2) {
      // k是需要覆盖的数据 name是e下面的数据覆盖到k k2是获取的id
      this.formData[k] = e[name];
      if (e.userid) {
        this.formData[k2] = e.id;
      }
    },
    // showtitles 显示标题
    showtitles(arr, id) {
      let titles = "";
      if (!id) return;
      let arrs2 = arr.filter((item) => item.value == id);

      if (arrs2.length) titles = arrs2[0].label;

      return titles;
    },
    receptionData(key, value) {
      // 接受弹出层的数据给 formData 只接受但数据
      if (typeof value === "object" && value.value) {
        this.formData[key] = value.value;
        console.log(key, value, "--------titles");
      }

      if (typeof value == "string") this.formData[key] = value;
      this.visiblehide();
    },
    // 遮罩显示点击
    popupShow(value) {
      this.visible = {};
      console.log(value, "---------value");
      this.visible[value] = true;
    },
    closehide() {
      // 关闭清空
      this.formData = {};
      this.endtext = "";
      this.visiblehide();
    },
    visiblehide(value) {
      console.log("执行", value);
      // 遮罩层关闭
      this.visible = {};
    },
    async courseMethod(query) {
      if (!query) {
        this.couList = [];
        return;
      }

      this.loading = true;
      try {
        // 模拟API调用，实际应替换为真实接口
        const courseData = JSON.parse(getStorage("courseObj"))?.course || [];
        this.couList = courseData.filter((item) =>
          item.course_name.toLowerCase().includes(query.toLowerCase())
        );
      } finally {
        this.loading = false;
      }
    },
    async userMethod(query) {
      if (!query) {
        this.userIdList = [];
        return;
      }

      this.loading = true;
      try {
        const userData = JSON.parse(getStorage("courseObj"))?.zdguser || [];
        this.userIdList = userData.filter((item) =>
          item.username.toLowerCase().includes(query.toLowerCase())
        );
      } finally {
        this.loading = false;
      }
    },
    handleStatusChange(value) {
      this.$emit("status-change", value);
    },
    reset() {
      // 数据清空
      this.formData = {};
      this.showPopup = false;

      this.$emit("resetscreem");
    },

    onSearch() {
      this.showPopup = false;
      this.$emit("search", this.formData);
    },
    editupdata(row, text) {
      // 编辑 进入编辑
      this.endtext = text || "编辑";
      this.showPopup = true;
      this.formData = { ...row };
    },
  },
};
</script>
          
          <style scoped>
.popup-content {
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  width: 90vw;
  max-width: 500px;
  box-sizing: border-box;
}

.popup-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.empty-tips {
  padding: 8px 0;
  color: var(--td-gray-color-6);
  text-align: center;
}

@media (max-width: 640px) {
  .popup-content {
    width: 100%;
    overflow-y: auto;
  }

  :deep(.t-form-item__label) {
    font-size: 14px;
  }

  :deep(.t-picker__toolbar) {
    padding: 8px 12px;
  }
}
</style>
          
          <style lang="scss" scoped>
.custom-input {
  :deep(.t-t-input--default) {
    font-size: 20px; /* 调整输入框 placeholder 字体大小 */
  }
}
</style>
          
          <style>
.t-form__label--right {
  font-size: 14px;
}
.t-cell__title-text {
  font-size: 14px;
}
.t-form__label--left {
  font-size: 14px; /* 调整左侧标签字体大小 */
}

.t-form__label {
  padding: 0;
}

.t-input--default {
  font-size: 13px;
}

.t-input--default::placeholder {
  color: gray; /* 设置颜色 */
  font-size: 14px !important; /* 设置字体大小 */
  border: none;
  /* 其他样式，例如字体系列 */
}

.t-form__item {
  padding-left: 10px;
  padding-right: 10px;
}

.t-input--default {
  font-size: 14px; /* 调整输入框字体大小 */
  border-bottom: none !important; /* 移除默认下划线 */
}
.t_cell {
  color: #000;
  font-size: 14px;
}
.t-cell__note {
  font-size: 14px;
}
.proptitle {
  font-size: 16px;
  font-weight: 600;
  padding: 10px 0;
}
.form-content {
  min-height: 50vh;
  max-height: 70vh;
  overflow-y: auto;
}
.textarea-example {
  height: 128px !important;
}
</style>